<template>
  <div>
    <div class="FooterBar">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="item.id"
          @click="fn(index)"
          :class="{ active: index === flagFooter }"
        >
          {{ item.text }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      default: () => [],
      validator(v) {
        let flag = true;
        if (!v instanceof Array) return false;
        v.forEach((item) => {
          if (!item.id) flag = false;
          if (!item.text) flag = false;
        });
        return flag;
      },
    },
    flagFooter: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {
    fn(index) {
      this.$emit("changeMain", index);
    },
  },
};
</script>
<style lang='less'  scoped>
div {
  background: linear-gradient(
    to right,
    #87cefa,
    #6495ed,
    #4682b4,
    #1e90ff,
    #00bfff,
    #008b8b
  );
  border-top: 1px solid #000;
  position: fixed;
  bottom: 0;
  width: 100%;
  ul {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    .active {
      background: linear-gradient(
        to right,
        #00ff7f,
        #3cb371,
        #2e8b57,
        #228b22,
        #808000,
        #b8860b
      );
    }
  }
}
</style>
